<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@include file="../common/taglibs.jspf"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><spring:message code="webapp.menu.${databaseNameCamel}.${table.unCapGenerateClassName}" /></title>
<!-- meta -->
<meta name="menu-${databaseNameCamel}" content="selected:true" />
<meta name="menu-${databaseNameCamel}" content="nav-active" />
<meta name="menu-${databaseNameCamel}-${table.unCapGenerateClassName}" content="active" />
</head>
<body>
	<div>
		<div class="search-toolbar">
			<form id="searchForm" class="form-inline">
			    <#list table.columns as column>
		        <#if column.type != 'Date'>
                <div class="form-group">
                    <label for="${column.name?uncap_first}"><spring:message code="webapp.page.${databaseNameCamel}.${table.unCapGenerateClassName}.${column.name?uncap_first}" />：</label>
                    <input cluster="simpleInput" id="${column.name?uncap_first}" name="${column.name?uncap_first}" class="form-control" style="width: 120px;height=30px;"/>
                </div>
                <#else>
		        <div class="form-group">
                    <label for="start${column.name}"><spring:message code="webapp.page.${databaseNameCamel}.${table.unCapGenerateClassName}.${column.name?uncap_first}" />：</label>
                    <input id="start${column.name}" name="start${column.name}" class="form-control form_datetime" style="width:150px" />
                    <em> - </em>
                    <input id="end${column.name}" name="end${column.name}" class="form-control form_datetime" style="width:150px" />
                </div>
                </#if>
	            </#list>
				<div class="form-group" style="float:right;">
					<button type="submit" onClick="searchSubmit();return false" id="searchBtn" href="javascript:void(0)" class="btn btn-primary"
						iconCls="icon-search"><spring:message code="webapp.constant.search" /></button>
					<a id="resetSearchBtn" href="javascript:void(0)" class="btn btn-primary"
						iconCls="icon-undo"><spring:message code="webapp.constant.resetSearch" /></a>
				</div>
			</form>
			<div class="clear"></div>
		</div>
		<div>
			<div id="toolbar" class="btn-group">
				<button id="btn_add" class="btn btn-default" data-toggle="modal" data-target="#addModal">
					<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
				</button>
			</div>

			<!-- 新增 模态框 -->
			<div class="modal fade" id="addModal" tabindex="-1" role="dialog" 
			   aria-labelledby="myModalLabel" aria-hidden="true">
			   	<div class="modal-dialog">
					<div class="modal-content">
					  <div class="modal-header">
					    <button id="addClose" type="button" class="close" 
					       data-dismiss="modal" aria-hidden="true">
					          &times;
					    </button>
					    <h4 class="modal-title" id="myModalLabel">
					       新增
					    </h4>
					  </div>
					  <div class="modal-body">
					  	<form id="addForm" class="form-horizontal" role="form">
						    <#list table.columns as column>
					        <#if column.type != 'Date'>
							<div class="form-group">
							  <label for="${column.name?uncap_first}" class="col-sm-3 control-label"><spring:message code="webapp.page.${databaseNameCamel}.${table.unCapGenerateClassName}.${column.name?uncap_first}" /></label>
							  <div class="col-sm-7">
							     <input name="${column.name?uncap_first}" type="text" class="form-control">
							  </div>
							</div>
			                </#if>
				            </#list>
						   <div class="form-group">
						      <div class="col-sm-offset-3 col-sm-7">
					  			<p id="addErrorInfo" class="alert alert-danger errorInfo"></p>
						      </div>
						   </div>
						</form>
					  </div>
					  <div class="modal-footer">
					    <button id="addSubmit" type="button" class="btn btn-primary">
					       提交
					    </button>
						<button type="button" class="btn btn-default" 
						data-dismiss="modal">取消
						</button>
					  </div>
					</div>
				</div>
			</div>

			<!-- 编辑 模态框 -->
			<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" 
			   aria-labelledby="myModalLabel" aria-hidden="true">
			   	<div class="modal-dialog">
					<div class="modal-content">
					  <div class="modal-header">
					    <button type="button" class="close" 
					       data-dismiss="modal" aria-hidden="true">
					          &times;
					    </button>
					    <h4 class="modal-title" id="myModalLabel">
					       编辑
					    </h4>
					  </div>
					  <div class="modal-body">
					  	<form id="updateForm" class="form-horizontal" role="form">
						    <#list table.columns as column>
					        <#if column.type != 'Date'>
							<div class="form-group">
							  <label for="${column.name?uncap_first}" class="col-sm-3 control-label"><spring:message code="webapp.page.${databaseNameCamel}.${table.unCapGenerateClassName}.${column.name?uncap_first}" /></label>
							  <div class="col-sm-7">
							     <input name="${column.name?uncap_first}" type="text" class="form-control">
							  </div>
							</div>
			                </#if>
				            </#list>
						   <div class="form-group">
						      <div class="col-sm-offset-3 col-sm-7">
					  			<p id="updateErrorInfo" class="alert alert-danger errorInfo"></p>
						      </div>
						   </div>
						</form>
					  </div>
					  <div class="modal-footer">
					    <button id="updateSubmit" type="button" class="btn btn-primary">
					       提交
					    </button>
						<button type="button" class="btn btn-default" data-dismiss="modal">取消
						</button>
					  </div>
					</div>
				</div>
			</div>
			
			<!-- 删除 模态框 -->
			<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" 
			   aria-labelledby="myModalLabel" aria-hidden="true">
			   	<div class="modal-dialog">
					<div class="modal-content">
					  <div class="modal-header">
					    <button type="button" class="close" 
					       data-dismiss="modal" aria-hidden="true">
					          &times;
					    </button>
					    <h4 class="modal-title" id="myModalLabel">
					       确认
					    </h4>
					  </div>
					  <div class="modal-body">
					  	<p>您确认要进行该操作？</p>
					  	<input id="deleteId" type="hidden" value="">
					  	<p id="deleteErrorInfo" class="alert alert-danger errorInfo"></p>
					  </div>
					  <div class="modal-footer">
					    <button id="deleteSubmit" type="button" class="btn btn-primary">
					       确认
					    </button>
						<button type="button" class="btn btn-default" data-dismiss="modal">取消
						</button>
					  </div>
					</div>
				</div>
			</div>
            <table id="table" 
            	data-toggle="table" 
            	data-url="/${databaseNameCamel}/${table.unCapGenerateClassName}/list"
            	data-pagination="true"
            	data-page-list="[10, 15, 20, 25, ALL]"
            	data-side-pagination="server"
                data-unique-id="${table.primaryKey.name?uncap_first}"
                data-query-params="paramPretreatment"
                data-query-params-type=""
            	data-show-export="true"
            	data-response-handler="dataPretreatment"
            	data-toolbar="#toolbar"
            	data-show-refresh="true" >
				<thead>
					<tr>
						<th data-field="${table.primaryKey.name?uncap_first}" data-sortable="true"><spring:message code="webapp.page.${databaseNameCamel}.${table.unCapGenerateClassName}.${table.primaryKey.name?uncap_first}" /></th>
			   			<#list table.commonColumns as column>
		        		<#if column.type != 'Date'>
			   			<th data-field="${column.name?uncap_first}" data-sortable="true"><spring:message code="webapp.page.${databaseNameCamel}.${table.unCapGenerateClassName}.${column.name?uncap_first}" /></th>
		        		<#else>
			   			<th data-field="${column.name?uncap_first}" data-sortable="true"><spring:message code="webapp.page.${databaseNameCamel}.${table.unCapGenerateClassName}.${column.name?uncap_first}" /></th>
					   	</#if>
			   			</#list>
			   			<th data-field="operations" data-formatter="operationsFormatter">操作</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>

	<script type="text/javascript">
	/* 基于bootstrap-table插件的表格，在向服务器拉表格数据的请求中添加自定义的查询参数 */
	var searchParams = new Object();
	function paramPretreatment(params) {
		searchParams.limit = params.pageSize;
		searchParams.offset = params.pageNumber;
		searchParams.order = params.sortOrder;
		searchParams.search = params.searchText;
		searchParams.sort = params.sortName;
		return searchParams;
	}
	/* 在表格的最后一列加上操作的button和响应事件 */
	function operationsFormatter(value,row,index) {
		return ['<button onClick="editRow(' + row.${table.primaryKey.name?uncap_first} + ')" class="btn btn-default" title="编辑"><i class="fa fa-pencil-square"></i>  编辑</button>',
		'<button onClick="deleteRow(' + row.${table.primaryKey.name?uncap_first} + ')" class="btn btn-default" title="删除"><i class="fa fa-times"></i>  删除</button>'].join(' ');
	}

	/* 新增窗口的提交按钮事件 */
	$('#addSubmit').click(function(){
		$('#addForm').ajaxSubmit({
			url:'/${databaseNameCamel}/${table.unCapGenerateClassName}/add',
			type:'post',
			dataType:'json',
			success:function(res) {
				if (res.code == 0) {
					$('#addModal').modal('hide');
					$('#addForm input[type=text]').val('');
					$('#addErrorInfo').hide();
					$('#table').bootstrapTable('refresh');
				}
				else {
					$('#addErrorInfo').text(res.message);
					$('#addErrorInfo').show();
				}
			},
			error:function(msg) {
				$('#addErrorInfo').text('<spring:message code="js.msg.server.error" />');
				$('#addErrorInfo').show();						
			}
		})
	});

	/* 编辑按钮事件 */
	function editRow(id) {
		var rowData = $('#table').bootstrapTable('getRowByUniqueId', id);
		<#list table.columns as column>
		$('#updateForm input[name=${column.name?uncap_first}]').val(rowData.${column.name?uncap_first});
		</#list>

		$('#updateErrorInfo').hide();
		$('#updateModal').modal();
	}

	/* 编辑窗口的提交按钮事件 */
	$('#updateSubmit').click(function(){
		$('#updateForm').ajaxSubmit({
			url:'/${databaseNameCamel}/${table.unCapGenerateClassName}/update',
			type:'post',
			dataType:'json',
			success:function(res) {
				if (res.code == 0) {
					$('#updateModal').modal('hide');
					$('#updateErrorInfo').hide();
					$('#table').bootstrapTable('refresh');
				}
				else {
					$('#updateErrorInfo').text(res.message);
					$('#updateErrorInfo').show();
				}
			},
			error:function(msg) {
				$('#updateErrorInfo').text('<spring:message code="js.msg.server.error" />');
				$('#updateErrorInfo').show();						
			}
		})
	});

	/* 删除窗口的确认按钮事件 */
	$('#deleteSubmit').click(function(){
		var deleteId = new Object();
		deleteId.${table.primaryKey.name?uncap_first} = $('#deleteModal #deleteId').val();

		$.ajax({
			url:'/${databaseNameCamel}/${table.unCapGenerateClassName}/delete',
			type:'post',
			data:deleteId,
			dataType:'json',
			success:function(res) {
				if (res.code == 0) {
					$('#deleteModal').modal('hide');
					$('#deleteErrorInfo').hide();
					$('#table').bootstrapTable('removeAll');
					$('#table').bootstrapTable('refresh');
				}
				else {
					$('#deleteErrorInfo').text(res.message);
					$('#deleteErrorInfo').show();
				}
			},
			error:function(msg) {
				showSysMsg(1,'<spring:message code="js.msg.server.error" />');
			}
		});
	});

	/* 查询按钮事件 */
	function searchSubmit(){
		var searchData = new Object();
		<#list table.columns as column>
		<#if column.type != 'Date'>
		$('#searchForm #${column.name?uncap_first}').val()=='' ? (searchParams.${column.name?uncap_first} = null) : (searchParams.${column.name?uncap_first} = searchData.${column.name?uncap_first} = $('#searchForm #${column.name?uncap_first}').val());
		<#else>
		$('#searchForm #start${column.name}').val()=='' ? (searchParams.start${column.name} = null) : (searchParams.start${column.name} = searchData.start${column.name} = $('#searchForm #start${column.name}').val());
		$('#searchForm #end${column.name}').val()=='' ? (searchParams.end${column.name} = null) : (searchParams.end${column.name} = searchData.end${column.name} = $('#searchForm #end${column.name}').val());
		</#if>
		</#list>

		searchData.limit = $('#table').bootstrapTable('getOptions').pageSize;
		searchData.offset = $('#table').bootstrapTable('getOptions').pageNumber-1;

		$.ajax({
			url:'/${databaseNameCamel}/${table.unCapGenerateClassName}/list',
			type:'post',
			data:searchData,
			dataType:'json',
			success:function(res) {
				if (res.code == 0) {
					$('#table').bootstrapTable('removeAll');
					$('#table').bootstrapTable('load',res.data);
				}
			},
			error:function(msg) {
				showSysMsg(1,'<spring:message code="js.msg.server.error" />');					
			}
		});
	}
	
	/* 重置查询参数按钮事件 */
	$('#resetSearchBtn').click(function(){
		searchParams = {};
		$('#searchForm input').val('');
		$('#table').bootstrapTable('removeAll');
		$('#table').bootstrapTable('refresh');
	});

	/* 初始化datetime选择器插件 */
	$(".form_datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii'});

	</script>

</body>
</html>

